import React, { Component } from 'react';
import { Table, Message } from '@alifd/next';
import IceContainer from '@icedesign/container';
import FoundationSymbol from '@icedesign/foundation-symbol';
import eventProxy from '../../../../../libs/eventProxy';
import { Forest } from '../../../../../libs/Tree';
import { menus, update, del } from '../../../../../api/Menu';
import DeleteBalloon from '../../../../../libs/DeleteBalloon';
import EditDialog from '../EditDialog';
  
export default class TreeTable extends Component {
  static displayName = 'TreeTable';

  static propTypes = {
  };
   myprops={};
  static defaultProps = {};
  constructor(props) {
    super(props);
    this.state = {
      sourceData: [],
      showData: [],
    };
  }

  componentWillMount() {
    eventProxy.on('system:select:change', (code) => {
      this.updateTable(code);
    });
  }
  updateTable(code) {
    menus().then((response) => {
      const data = response.data.data;
      const roots = this.dataToTree(data, code);
      this.setState({
        systemCode: code,
        sourceData: data,
        showData: roots,
        refresh: false,
      });
    });
  }
  dataToTree= (dataSource, systemCode) => {
    const forest = new Forest();
    dataSource.forEach((menu) => {
      if (menu.systemCode == systemCode) {
        menu.pid = menu.parentId;
        menu.children = [];
        forest.init(menu);
      }
    });
    return forest.roots;
  }

  onConfirm = (id) => {
    del({
      params: {
        ids: id,
      },
    }).then((response) => {
      const data = response.data;
      if (data.code === 200) {
        Message.success('删除成功');
        eventProxy.trigger('system:select:change', this.state.systemCode);
      } else {
        Message.warning('删除失败');
      }
    });
  }
  getFormValues = (dataIndex, values) => {
    const items = {
      id: values.id,
      name: values.name,
      href: values.href,
      icon: values.icon,
      sort: values.sort,
      useable: values.useable,
      type: values.type,
      permission: values.permission,
    };
    update(items).then((response) => {
      const code = response.data.code;
      if (code === 200) {
        Message.success('修改成功');
        // 刷新列表
        const sources = this.state.sourceData;
        for (let index = 0; index < sources.length; index++) {
          const ele = sources[index];
          if (ele.id === values.id) {
            sources[index] = values;
            break;
          }
        }
        console.log(sources);
        const shows = this.dataToTree(sources, this.state.systemCode);
        this.setState({
          showData: shows,
        });
      } else {
        Message.warning('修改失败');
      }
    });
  }
  render() {
    const isZebra = true;
    const renderOpt = (value, index, record) => {
      return (
        <span>
          <EditDialog
            index={index}
            record={record}
            getFormValues={this.getFormValues}
          />
          <DeleteBalloon handleRemove={() => this.onConfirm(record.id)} />
        </span>
      );
    };
    const renderUseable = (value, index, record) => {
      const label = value == 0 ? '是' : '否';
      return (
        <span>
          {label}
        </span>
      );
    };

    const renderType = (value, index, record) => {
      let label = '';
      if (value === 'menu') {
        label = '菜单';
      } else if (value === 'button') {
        label = '按钮';
      }

      return (
        <span>
          {label}
        </span>
      );
    };
    const rendIcon = (value) => {
      return (value === null ? '' : <FoundationSymbol type={value} />);
    };
    return (
      <IceContainer>
        <Table
          dataSource={this.state.showData}
          primaryKey="id"
          isTree
          isZebra={isZebra}
          align="center"
          rowSelection={{ onChange: () => {} }}
        >
          <Table.Column title="菜单名称" dataIndex="name" />
          <Table.Column title="菜单类型" dataIndex="type" cell={renderType} />
          <Table.Column title="菜单链接" dataIndex="href" />
          <Table.Column title="权限标识" dataIndex="permission" />
          <Table.Column title="图标" dataIndex="icon" align="center" cell={rendIcon} />
          <Table.Column title="是否启用" dataIndex="useable" cell={renderUseable} />
          <Table.Column title="编辑" cell={renderOpt} />
        </Table>
      </IceContainer>
    );
  }
}
